<template>
  <el-dialog
    v-model="state.dialogVisible"
    :append-to-body="true"
    :before-close="close"
    modal-class="form-design-dialog"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    :fullscreen="fullscreen"
    top="5vh"
    :modal="model"
    :show-close="true"
    :width="width"
  >
    <div class="app">
      <WflowFormDesign ref="formDesignerRef" :v-model:formDef="state.formDef" />
    </div>
  </el-dialog>
</template>
<script setup name="FormDesign">
import { useUserStore } from "@/store/modules/user";
import { cloneObject } from "@/utils/common";
import { updateForm } from "@/api/flow/form";
import { useMessage } from "@/hooks/message";
import { getTokenValue } from "@/utils/auth";
import WflowFormDesign from "@/views/design/form/FormDesigner.vue";

const { VITE_API_URL } = import.meta.env;
let apiBaseUrl = VITE_API_URL;

const props = defineProps({
  width: {
    type: String,
    default: "100%"
  },
  model: {
    type: Boolean,
    default: true
  },
  fullscreen: {
    type: Boolean,
    default: true
  }
});
const emits = defineEmits(["confirm"]);

const userStore = useUserStore();
const token = getTokenValue();
const { getUserid: userid } = storeToRefs(userStore);
const { getUsername: username } = storeToRefs(userStore);

const formDesignerRef = ref(null);

const state = reactive({
  dialogVisible: false,
  formData: {
    id: "",
    formName: "",
    formRemark: "",
    formStatus: "0",
    formInfo: "",
    formTypeCode: "",
    formTypeName: ""
  },
  formDef: {
    conf: {
      labelPosition: "right", //标签位置
      labelWidth: 80, //标签宽度，
      size: "default"
    },
    components: []
  }
});

const show = async row => {
  if (row && row.id) {
    cloneObject(state.formData, row);
  }
  state.dialogVisible = true;
};

const initForm = () => {
  nextTick(() => {
    formDesignerRef.value.setFormJson(state.formData.formInfo);
  });
};

const close = () => {
  state.formData = {
    id: "",
    formName: "",
    formRemark: "",
    formStatus: "0",
    formInfo: "",
    formTypeCode: "",
    formTypeName: ""
  };
  formDesignerRef.value.clearDesigner();
  state.dialogVisible = false;
};

const save = async () => {
  const json = formDesignerRef.value.getFormJson();
  state.formData.formInfo = JSON.stringify(json);
  let data = { code: 200, msg: "", data: null };
  data = await updateForm(state.formData);
  if (data.code === 200) {
    useMessage().success(data.msg);
    emits("confirm", {});
    close();
  } else {
    useMessage().error(data.msg);
  }
};

onMounted(() => {});

defineExpose({
  close,
  save,
  show,
  initForm
});
</script>
<style lang="scss">
body {
  margin: 0;
}
.form-design-dialog .app {
  height: 100%;
  margin: 0;
  background-color: #ffffff;
}

.form-design-dialog .ace-editor div {
  font-family:
    Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
  font-size: 16px !important;
  font-size-adjust: none !important;
  text-rendering: optimizeLegibility;
}

.form-design-dialog > .el-dialog__header {
  display: none !important;
  height: 0px !important;
  padding: 0px !important;
}

.form-design-dialog > .el-dialog__body {
  padding-top: 0px !important;
  padding-right: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 0px !important;
  border: 0px solid red;

  .el-alert {
    margin-bottom: 0px;
  }
}

.form-design-dialog > .el-dialog__footer {
  display: none !important;
  height: 0px !important;
}
</style>
